import React from 'react';
import { Row, Col, Tag, List } from 'antd';
import styles from './style.less';

// 人员流动
const StaffTurnover = ({ data = {}, leaveData = [] }) => (
    <div className={styles.staffTurnoverWrap}>
        <Row gutter={16}>
            <Col span={12}>
                <div className={styles.cumStatistic}>
                    <p className={`${styles.cumStatisticNum} ${styles.red}`}>
                        {data.leavePoplePercentage ? `${data.leavePoplePercentage}%` : '--'}
                    </p>
                    <p className={styles.cumStatisticText}>离职率</p>
                </div>
            </Col>
            <Col span={12}>
                <div className={styles.cumStatistic}>
                    <p className={styles.cumStatisticNum}>
                        {data.industryReference ? `${data.industryReference}%` : '--'}
                    </p>
                    <p className={styles.cumStatisticText}>业界参考</p>
                </div>
            </Col>
        </Row>
        <Row gutter={16} style={{ marginTop: 20, fontSize: 12 }}>
            <Col span={12}>
                入职：{' '}
                {data.entryPeopleNum ? (
                    <Tag color="orange">
                        {data.entryPeopleNum !== 0 && '+'}
                        {data.entryPeopleNum}
                    </Tag>
                ) : (
                    '--'
                )}
            </Col>
            <Col span={12}>
                转正：{' '}
                {data.turnRightNum ? (
                    <Tag color="orange">
                        {data.turnRightNum !== 0 && '+'}
                        {data.turnRightNum}
                    </Tag>
                ) : (
                    '--'
                )}
            </Col>
        </Row>
        <Row gutter={16} style={{ marginTop: 10, fontSize: 12 }}>
            <Col span={12}>
                离职：
                {data.leavePeopleNum ? (
                    <Tag color="green">
                        {data.leavePeopleNum !== 0 && '-'}
                        {data.leavePeopleNum}
                    </Tag>
                ) : (
                    '--'
                )}
            </Col>
            <Col span={12}>调岗：{data.transferNum ? <Tag>{data.transferNum}</Tag> : '--'}</Col>
        </Row>
        <div className={styles.titlebar}>离职原因</div>
        <List
            size="small"
            itemLayout="horizontal"
            dataSource={leaveData}
            split={false}
            className={styles.leaveList}
            renderItem={(item, index) => (
                <List.Item>
                    <List.Item.Meta
                        avatar={
                            <div className={`${styles.warnIndex} ${index > 2 ? styles.warnFour : styles.warn}`}>
                                {index + 1}
                            </div>
                        }
                        title={
                            <div>
                                {item.leaveReason}
                                <span style={{ color: '#D9D9D9', margin: '0 8px' }}>|</span>
                                {item.usageCount ? (
                                    <span style={{ color: 'rgba(0,0,0,0.45)' }}>
                                        {item.usageCount}人/{((item.usageCount / item.allCount) * 100).toFixed(2)}%
                                    </span>
                                ) : (
                                    '--'
                                )}
                            </div>
                        }
                    />
                </List.Item>
            )}
        />
    </div>
);

export default StaffTurnover;
